import React, { useEffect, useState } from "react";
import PostItem from "../components/PostItem";
import Spinner from '../components/Spinner';
import {useNavigate, useParams} from "react-router-dom";
import axios from "axios";
import {Button, Card, NavBar, Toast, Dialog, Tag, AutoCenter, ErrorBlock} from "antd-mobile";

const AuthorPosts = () => {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const {id} = useParams();
  const colors = {'applied':'rgba(80, 62, 157, 1)', 'approved':'rgba(251, 110, 58, 1)', 'failed':'rgba(255, 0, 0, 1)', 'closed':'rgba(255, 0, 0, 1)'};
  const status = {'applied':'待审核', 'approved':'已通过', 'failed':'未通过', 'closed':'已关闭'};
  const navigate = useNavigate();
  const back = () =>{
      navigate(-1);
  }
  const closePost = async (id) => {
      setIsLoading(true)
      try {
          const response = await axios.post(`${process.env.REACT_APP_BASE_URL}/posts/close/${id}`)
          console.log(response?.status)
      } catch (err) {
          console.log(err);
      }

      setIsLoading(false)
  }

  useEffect(() => {
      const fetchPosts = async () => {
          setIsLoading(true)
          try {
              const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/posts/users/${id}`)
              setPosts(response?.data)
          } catch (err) {
              console.log(err);
          }

          setIsLoading(false)
      }

      fetchPosts();
  }, [id])

  if (isLoading) {
      <Spinner />
  }

  return (
      <section className='posts'>
          <NavBar style={{'background-color': 'rgba(80, 62, 157, 1)', 'color': 'white'}} onBack={back}>我发布的项目</NavBar>

          {posts.length > 0 ? <div className='container posts__container'>
              {posts.map(({ _id: id, wages, views, title, status:apply, description, avatar, creator, createdAt }) =>
                  <Card>
                      <Tag style={{'float':'right','position':'relative','top':'20px'}} color={colors[apply]}>{status[apply]}</Tag>
                  <PostItem key={id}
                      postID={id}
                            wages={wages}
                            views={views}
                      title={title}
                      description={description}
                      authorID={creator}
                      createdAt={createdAt}
                      avatar={avatar}
                  />
                      {/*注释：apply!=='closed'如果状态不是已关闭，就显示关闭按钮，如果是已关闭，就不显示了。*/}
                      {apply!=='closed'&&<div className='footer' onClick={e => e.stopPropagation()}>
                          <Button
                              color='default'
                              onClick={() => {
                                  Dialog.confirm({
                                      title:'提示',
                                      content: '您确定取关闭项目吗？关闭后将无法被人才认领',
                                      onConfirm: async () => {
                                          await closePost(id);
                                          Toast.show({
                                              icon: 'success',
                                              content: '已关闭',
                                              position: 'bottom',
                                          })
                                      },
                                  })
                              }}
                          >
                              关闭
                          </Button>
                      </div>}
                  </Card>  )}
          </div> : <AutoCenter>
              <ErrorBlock image='https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'
                          style={{'--image-height': '150px'}}
                          title="暂无数据"
                          description=""
                          status='empty' /></AutoCenter>}
      </section>
  )
}

export default AuthorPosts
